<template>
  <div class="publicBarDetails">
    <van-nav-bar title="设施管理" left-arrow @click-left="onClickLeft" fixed />
    <ul class="manage_content">
      <li>
        <div class="content_key">楼号</div>
        <div class="content_text">{{detail.buildingCode}}</div>
      </li>
      <li>
        <div class="content_key">人员</div>
        <div class="content_text">{{detail.applyName}}</div>
      </li>
      <li>
        <div class="content_key">身份</div>
        <div class="content_text">{{detail.applyIdentityName}}</div>
      </li>
      <li>
        <div class="content_key">类型</div>
        <div class="content_text">{{detail.applyTypeName}}</div>
      </li>
      <!-- <li>
        <div class="content_key">积分</div>
        <div class="content_text">245</div>
      </li>
      <li>
        <div class="content_key">积分类型</div>
        <div class="content_text">4334</div>
      </li>-->
    </ul>
    <div class="devide_div"></div>
    <div class="manage_content" style="padding: 10px 0 20px 25px;">
      <p class="description">内容描述</p>
    </div>
    <div class="manage_content" style="padding-bottom:30px;">
      <p>{{detail.content}}</p>
    </div>

    <div class="devide_div"></div>
    <div class="manage_content" style="padding:20px 0 20px 20px">
      <img
        :src="detail.image"
        alt
        style="border:1px solid #ccc;width:70px;height:70px"
        @click="seeImg"
      />
    </div>
    <!-- <div class="devide_div"></div>
    <div class="dz_">
      <div class="status_btn dz-icon" v-if="detail.isFavorited == 2" @click.stop="thumbs(detail)">
        <svg-icon class="delete_icon" icon-class="点赞-默认" widthW="1.2em" heightH="1.2em" />
        <span class="color">{{detail.favoriteCount}}</span>
      </div>
      <div
        class="status_btn dz-icon"
        v-if="detail.isFavorited == 1"
        @click.stop="cancelLike(detail)"
      >
        <svg-icon class="delete_icon" icon-class="点赞-选中" widthW="1.2em" heightH="1.2em" />
        <span class="color">{{detail.favoriteCount}}</span>
      </div>
      <div class="inform" @click.stop="showInformPop(detail.id)">
        <van-icon name="warn-o" />
      </div>
    </div>
    <div class="bgc" v-if="showInform">
      <div class="inform-sheet" v-if="showInform">
        <div class="title-bar">
          <div class="close" @click="closeSheet">
            <van-icon name="close" />
          </div>
          <span class="title">请输入举报原因</span>
          <div class="complete" @click="integral_inform">
            <van-icon name="passed" />
          </div>
        </div>
        <div class="content">
          <van-field v-model="message" rows="1" autosize type="textarea" placeholder="请输入驳回原因" />
        </div>
    </div>-->
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import integral from "../../controller/integral";
export default {
  name: "facilityManage",
  data() {
    return {
      detail: {},
      imgList: [],
      certificateList: []
      // showInform: false,
      // message: "",
      // applyId: ""
    };
  },
  mounted() {
    this.getDetails();
  },
  methods: {
    // // 举报
    // integral_inform() {
    //   let data = {
    //     applyId: this.applyId,
    //     content: this.message
    //   };
    //   integral.integral_inform(data).then(res => {
    //     if (res.code === "0" && res.datas) {
    //       this.$toast("举报成功");
    //       this.showInform = false;
    //       this.message = "";
    //     }
    //   });
    // },
    // thumbs(o) {
    //   let data = {
    //     applyId: o.id
    //   };
    //   integral.integral_like(data).then(res => {
    //     if (res.code === "0" && res.datas) {
    //       console.log("点赞");
    //       o.isFavorited = 1;
    //       o.favoriteCount += 1;
    //     }
    //   });
    // },
    // // 取消点赞
    // cancelLike(o) {
    //   let data = {
    //     applyId: o.id
    //   };
    //   integral.integral_like_cancel(data).then(res => {
    //     if (res.code === "0" && res.datas) {
    //       console.log("取消点赞");
    //       o.isFavorited = 2;
    //       console.log(o.isFavorited, "isFavoritedCancel");
    //       o.favoriteCount -= 1;
    //     }
    //   });
    // },
    // completeSheet() {
    //   this.showInform = false;
    // },
    // closeSheet() {
    //   this.message = "";
    //   this.showInform = false;
    // },
    // showInformPop(id) {
    //   this.showInform = true;
    //   this.applyId = id;
    // },
    seeImg() {
      ImagePreview({
        images: [this.detail.image]
      });
    },
    getDetails() {
      let id = this.$route.params.id;
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner"
      });
      integral.integral_public_list_detatil(id).then(res => {
        if (res.code === "0") {
          if (res.datas) {
            this.detail = res.datas;
            this.$toast.clear();
          }
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../views/workstation/styles/workstation.scss";
.publicBarDetails {
  height: 100%;
  background: #ffffff;

  .contact_btn {
    width: 345px;
    margin: 15px;
    border-radius: 22px;
    background: #dc4630;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
  }

  .manage_content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    background: #ffffff;

    span {
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      padding: 14.5px 0 10px 0;
      width: 100%;
    }

    img {
      border-radius: 4.25px;
      width: 2.9333rem;
      height: 2.2rem;
    }

    img:nth-child(3n + 1) {
      margin-left: 7.5px;
    }

    img:nth-child(3n + 3) {
      margin-left: 7.5px;
    }

    img:nth-child(n + 5) {
      margin-top: 7.5px;
    }

    li {
      padding: 14.5px 0;
      width: 100%;
      border-bottom: 1px solid #edeff2;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
    }

    li:first-child {
      padding-top: 20px;
    }
    li:last-child {
      border: none;
    }

    .content_key {
      width: 106px;
      float: left;
    }

    .content_text {
      width: 239px;
      float: right;
      text-align: right;
    }
    .description {
    }
    .description::before {
      content: "";
      width: 3px;
      height: 20px;
      background: #dc4630;
      position: absolute;
      left: 15px;
    }
  }
  .dz_ {
    position: relative;
    .dz_count {
      position: absolute;
      right: 60px;
      top: 20px;
    }
    .inform {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 18px;
      color: #bbb;
    }
    .dz_icon {
      padding-right: 5px;
    }
    .color {
      color: #bbb;
    }
  }
  .bgc {
    height: 100%;
    background-color: rgba(000, 000, 000, 0.5);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .inform-sheet {
      width: 100%;
      height: 200px;
      background: #fff;
      position: fixed;
      bottom: 0;
      .title-bar {
        width: 85%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: auto;
        padding: 10px 20px;
        border-bottom: 1px solid #eee;
        .title {
          color: #666;
          font-size: 16px;
        }
        .close {
          text-align: center;
          font-size: 16px;
        }
        .complete {
          text-align: center;
          font-size: 16px;
        }
      }
      .content {
        padding: 16px 16px 160px;
      }
    }
  }
}
</style>
